<template>
  <div>
    <el-tabs v-model="active">
      <el-tab-pane label="组件属性" name="first">

        <el-row type="flex" align="middle">
          <el-col :span="6">
            <div class="prop-set-title">
              分表名称
            </div>
          </el-col>
          <el-col :span="18">
            <el-input
              @change="modelNameChange"
              v-model="store.current.model"
              placeholder="表名"
            ></el-input>
          </el-col>
        </el-row>

        <el-row type="flex" align="middle">
          <el-col :span="6">
            <div class="prop-set-title">
              中文名称
            </div>
          </el-col>
          <el-col :span="18">
            <el-input
              v-model="store.current.options.chineseName"
              placeholder="中文名称"
            ></el-input>
          </el-col>
        </el-row>

        <el-row type="flex" align="middle">
          <el-col :span="6">
            <div class="prop-set-title">
              外键关联
            </div>
          </el-col>
          <el-col :span="18">
            <i @click="addForeignKey" class="el-icon-circle-plus-outline addForeignKey"></i>
          </el-col>
        </el-row>


        <div class="handle-wrap">
          <el-card
            class="box-card"
            v-for="(foreign,index) in store.current.foreignKeys" 
            :key="'foreign' + index"
          >
            <div slot="header" class="clearfix">
              <i
                @click="removeForeign(store.current.foreignKeys,index)"
                class="el-icon-delete"
              ></i>
            </div>
            <el-row type="flex" align="middle">
              <el-col :span="24">
                <div class="prop-set-title">
                 <el-input v-model="foreign['name']" placeholder="name"></el-input>
                </div>
              </el-col>
            </el-row>
            <el-row type="flex" align="middle">
              <el-col :span="24">
                <div class="prop-set-title">
                 <el-input v-model="foreign['key']" placeholder="key"></el-input>
                </div>
              </el-col>
            </el-row>
            <el-row type="flex" align="middle">
              <el-col :span="24">
                <div class="prop-set-title">
                 <el-input v-model="foreign['reTableName']" placeholder="reTableName"></el-input>
                </div>
              </el-col>
            </el-row>
          </el-card>
        </div>

        <el-row type="flex" align="middle">
          <el-col :span="24">
            <div class="prop-set-title">
              系统字段选择
            </div>
          </el-col>
        </el-row>

        <el-row type="flex" align="middle">
          <el-col :span="6">
            <div class="prop-set-title">
              创建人
            </div>
          </el-col>
          <el-col :span="6">
            <el-switch v-model="store.current.options.creator"></el-switch>
          </el-col>
          <el-col :span="6">
            <div class="prop-set-title">
              创建时间
            </div>
          </el-col>
          <el-col :span="6">
            <el-switch v-model="store.current.options.create_time"></el-switch>
          </el-col>
        </el-row>

        <el-row type="flex" align="middle">
          <el-col :span="6">
            <div class="prop-set-title">
              更新人
            </div>
          </el-col>
          <el-col :span="6">
            <el-switch v-model="store.current.options.updater"></el-switch>
          </el-col>
          <el-col :span="6">
            <div class="prop-set-title">
              更新时间
            </div>
          </el-col>
          <el-col :span="6">
            <el-switch v-model="store.current.options.update_time"></el-switch>
          </el-col>
        </el-row>

        <el-row type="flex" align="middle">
          <el-col :span="6">
            <div class="prop-set-title">
              删除
            </div>
          </el-col>
          <el-col :span="6">
            <el-switch v-model="store.current.options.deleted"></el-switch>
          </el-col>
          <el-col :span="6">
            <div class="prop-set-title">
              禁用
            </div>
          </el-col>
          <el-col :span="6">
            <el-switch v-model="store.current.options.disabled"></el-switch>
          </el-col>
        </el-row>

        <el-row type="flex" align="middle">
          <el-col :span="6">
            <div class="prop-set-title">
              状态
            </div>
          </el-col>
          <el-col :span="6">
            <el-switch v-model="store.current.options.status"></el-switch>
          </el-col>
          <el-col :span="6">
            <div class="prop-set-title">
              版本号
            </div>
          </el-col>
          <el-col :span="6">
            <el-switch v-model="store.current.options.ver"></el-switch>
          </el-col>
        </el-row>

      </el-tab-pane>
      <el-tab-pane label="表单属性" name="second">
        <form-config :store="store"></form-config>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
 import formConfig from "@/low-code/setting/form-config/index.vue"
import clone from 'clone'
export default {
  inject: ['getStore'],
  components: { formConfig },
  data() {
    return {
      active: 'first',
    }
  },
  watch: {
    'store.current.options': {
      handler() {
        //特别注意，不能用箭头函数，箭头函数，this指向全局
        this.$handleStack.push(clone(this.store.root))
      },
      // immediate: true,  //刷新加载 立马触发一次handler
      deep: true, // 可以深度检测到 obj 对象的属性值的变化
    },
  },
  methods: {
    modelNameChange(keyName) {
      if (!keyName) {
        return false
      }
      let isRepeat = this.store.checkRepeat(keyName)
      if (isRepeat) {
        this.store.current.model =
          this.store.current.type + '_' + this.store.current.key
        this.$message('该关键字已被使用 请不要重复绑定')
      }
    },
      addForeignKey () {
        this.store.current.foreignKeys.push({
          name: "",
          key: "",
          reTableName:""
        })
      },
      removeForeign (foreignKeys, index) {
        this.$delete(foreignKeys, index)
      }
  },
  computed: {
    store() {
      return this.getStore()
    },
  },
}
</script>

<style scoped>
::v-deep .el-tabs__item[aria-controls] {
  width: 50% !important;
  text-align: center;
}

>>> .el-card__header {
  padding: 5px !important;
}


.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.el-icon-delete {
  cursor: pointer;
  float: right;
  padding: 3px 0;
  color: red;
}

.handle-wrap {
  padding: 0 10px;
}

.box-card {
  margin-bottom: 10px;
}
</style>
